<!--
*@Author: QWP
*@Description: 常用功能
*@Date: 2024-07-14 16:47:58
-->
<template>
  <u-card title="常用功能">
    <a-list :data-source="commonDatas" :grid="{ gutter: [16, 16], xs: 4, sm: 4, md: 5, lg: 6, xl: 7, xxl: column }">
      <template #renderItem="{ item }">
        <a-row justify="center" class="f-cursor f-item-hover-bg f-padding-t4" @click="toJump(item)">
          <a-space direction='vertical' align="center">
            <div class="u-common-fun-icon">
              <u-icon-font :type="item.icon"></u-icon-font>
            </div>
            <span class="u-common-fun-title">{{ item.name }}</span>
          </a-space>
        </a-row>
      </template>
    </a-list>
  </u-card>
  <div style="display: none">
    <component :is="dynamicComponent" ref="dynamicRef" style="display: none">
    </component>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h, defineAsyncComponent, markRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { FolderOpenOutlined } from '@ant-design/icons-vue'
import { UIconFont } from '@/components/common/iconfont'
import { urlFile } from '@/util/common'
import { Base64 } from 'js-base64'

const router = useRouter();
interface Props {
  column?: number
}
withDefaults(defineProps<Props>(), {
  column: 10
})
const emits = defineEmits(['funDirect'])

// 常用功能数据
const commonDatas = reactive([
  {
    icon: 'icon-a-lujing1', name: '发文拟稿', type: 'dialog', methodName: 'toEdit', params: '',
    path: '/src/views/oa/officialDoc/dispatch/Index.vue',
  },
  {
    icon: 'icon-huiyishixuanze', name: '收文登记', type: 'dialog', methodName: 'toEdit',
    // path: '/TransitIndex/IncomeDoc/1'
    path: '/src/views/oa/officialDoc/incoming/Index.vue'
  },
  {
    icon: 'icon-chuchashenqing', name: '差旅申请', type: 'dialog', methodName: 'toEdit', params: '',
    path: '/src/views/oa/administration/travel/Index.vue'
  },
  {
    icon: 'icon-cheliangguanli', name: '派车申请', type: 'dialog', methodName: 'toEdit', params: '',
    path: '/src/views/oa/administration/car/sendnfo/Index.vue'
  },
  {
    icon: 'icon-wodericheng', name: '日程管理', type: 'dialog', methodName: 'toEdit', params: '',
    path: '/src/views/oa/assist/myCalender/Index.vue'
  },
  // { icon: 'icon-a-lujing4', name: '应急资源地图', type: 'tab', path: '/TransitIndex/EmergencyResourceMap' },
  // { icon: 'icon-a-zu321', name: '应急预案', type: 'tab', path: '/TransitIndex/EmergencyScheme' },
  // { icon: 'icon-a-zu322', name: '综合预警', type: 'tab', path: '/TransitIndex/SumWarning' },
  { icon: 'icon-dongtaibaobiaoshouji', name: '任务报表收集', type: 'dialog', methodName: 'toEdit',
    path: '/src/views/oa/emergency/dynamicReport/createReport/Index.vue' 
  },
  { icon: 'icon-dongtaibaobiaoshouji', name: '动态表单', type: 'dialog', methodName: 'toEdit',
    path: '/src/views/oa/emergency/dynamicForms/index.vue' 
  },
  { icon: 'icon-gongnengdaohang', name: '办公导航', type: 'tab', path: '/TransitIndex/FunctionNavigate' },
  { icon: 'icon-yingjirukou', name: '相关业务系统', type: 'tab', path: '/TransitIndex/EmergencyNav' },
])

const dynamicRef = ref(null);
const dynamicComponent = ref<any>('div')

// 跳转，打开弹窗
const toJump = (data) => {
  if (data.type == 'tab') {
    router.push({
      path: data.path,
      query: {
        _tab: '1',
        label: data.name
      }
    })
  } else {
    const modules = import.meta.glob(['/src/views/oa/*/*.vue', '/src/views/oa/*/*/*.vue', '/src/views/oa/*/*/*/*.vue']);
    const link = modules[data.path]
    dynamicComponent.value = markRaw(defineAsyncComponent(modules[data.path]))
    setTimeout(() => {
      try {
        dynamicRef.value[data.methodName]();
      } catch (error) {}
    }, 50)
  }
}

</script>

<style lang='scss' scoped>
.u-common-fun-icon {
  width: 48px;
  height: 48px;
  background: rgba(24, 144, 255, 0.1);
  border-radius: 16px 16px 16px 16px;
  line-height: 48px;
  text-align: center;
  font-size: 20px;
  color: #1890FF
}

.u-common-fun-title {
  font-size: var(--font-size-level-1);
  color: #333333;
}
</style>